<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    表单, 最最最最最重要
    表单的作用是接受用户的信息 使用 form 标签
    表单是要提交数据给服务器的, action属性是为了指定服务器地址, 和href是一样的
    <br>
    <br>
    <form action="某位置">
        <!--        画一个提交按钮-->
        <!--        input代表输入域, type为submit时候, 代表该按钮是一个提交按钮, 有提交表单的能力-->
<!--        type 为 password 时候代表密码框-->

<!--        value显示按钮上面的文本-->
        type 默认为 text 代表文本框, value 可以设置文本框上的初始数值
        <br>
        用户名&nbsp;<input type="text" value="请输入用户名"/>
        <br>
        密&nbsp;&nbsp;&nbsp;码&nbsp;<input type="password"/>
        <br>
        <!-- 表单关联的按钮, 可以提交表单信息-->
        <input type="submit" value="登录"/>
        <br>
        <!--        type 为 radio 代表单选按钮-->
        <input type="radio" value="单选"/>
<!--        <input type="password">-->
        <!--        这只是一个按钮, 不具备提交表单的能力-->
        <input type="button" value="button"/>
    </form>

    <br>
    <br>
    <br>
    <br>
<!--表格和表单结合写一个带清空的登录页面-->
<!--    form里面的action写提交信息的地址-->
<!--    表单的信息的格式为  action?name=value&name=value&name=value&name=value&name=value....-->
<!--    http://localhost:63342/TestWeb/web/%E6%9F%90%E4%B8%AA%E4%BD%8D%E7%BD%AE?username=zhangsan&password=124-->
<!--    表单有name属性的但点击提交, 都会提交键值对给服务器, 不想提交就不要写name属性-->
    <form action="某个位置">
        <table>
            <tr>
                <td>用户名</td> <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td>密码</td> <td><input type="password" name="password"/></td>
            </tr>
            <tr>
<!--                清空的 type 为 reset, 必须在表单的内部使用-->
<!--                提交的 type 为 submit, 必须在表单内部使用-->
<!--                提交时候表单中的文本框和密码框必须有name属性-->
<!--                因为这个是 queryString 的键-->
<!--                比如 文本框的name为username, 你输入为123, 这个queryString为 username=123-->
<!--                所以没有name属性, 提交是不起作用的-->
                <td><input type="submit" value="登录"/></td> <td><input type="reset" value="清空"/></td>
            </tr>
        </table>
    </form>





    <br>
    <br>
    <br>
    <br>
    <br>
<!--用户注册按钮-->
    <!--
        用户名
        密码
        确认密码
        性别
        兴趣爱好
        学历
        简介
    -->
<!--    method 为 http 的方法, 如果为 post 代表提交的信息不会显示在地址栏上(在 http 的 body 中), 更加安全-->
<!--    method 只有 显示指定为 post 时才是, 其他情况都是 get-->
<!--    post 时, 提交的格式也是 querystring 键值对, 只不过不显示-->
<!--    超链接都是 get-->
    <form action="address" method="post">
        用户名
        <input type="text" name="username"/> <br>
        密&nbsp;&nbsp;&nbsp;&nbsp;码
        <input type="password" name="password"/> <br>
<!--        确认密码不需要提交给服务器, 前端的js就可以搞得定-->
        确认密码
        <input type="password"/> <br>
        性&nbsp;&nbsp;&nbsp;&nbsp;别
<!--        单选按钮如果name属性一样就表示同一组, 就不会都选上了-->
<!--        单选按钮必须要写value, value代表键值对的值, 要不然就会提交空字符串-->
<!--        checked 为默认选中-->
        <input type="radio" name="sex" value="man" checked/>男
        <input type="radio" name="sex" value="m=woman"/>女 <br>
        兴趣爱好
<!--        复选框为 checkbox 属性, 也必须要有 value-->
<!--        默认选中加 checked-->
        <input type="checkbox" name="interest" value="ect"/>吃
        <input type="checkbox" name="interest" value="drink"/>喝
        <input type="checkbox" name="interest" value="play"/>玩
        <input type="checkbox" name="interest" value="happy"/>乐 <br>
        学历
<!--        下拉列表为 select, 之后一个列表项一个 option-->
<!--        加上 multiple 属性, 即 multiple="multiple" 就支持多选-->
<!--        size 属性可以设置下拉列表显示几个-->
        <select name="grade">
<!--            默认选中为 selected-->
            <option value="xx">小学</option>
            <option value="cz">初中</option>
            <option value="gz">高中</option>
            <option value="bk" selected>本科</option>
            <option value="ss">硕士及其以上</option>
        </select>
        <br>
        <br>
        简介
<!--        文本域-->
<!--        用户填入的信息为 value -->
<!--        rows 指定行数, cols 指定列数-->
        <textarea rows="10" cols="45" name="xq"></textarea>
        <br>
        <input type="submit" value="注册"/>
        <input type="reset" value="清空"/>
    </form>
<!-- http://localhost:63342/TestWeb/web/address?username=zhangsan&password=123456&sex=man&interest=ect&interest=drink&grade=bk&xq=%E6%88%91%E6%98%AFsb -->

<!--    file 属性为选择文件-->
    <input type="file"/>
    <br>
    <br>
    <br>
    <br>

    <form action="address">
<!--        隐藏域, 网页上看不到, 但是表单提交数据的时候会自动提交-->
        <input type="hidden" name="userId" value="111"/>
        用户代码 <textarea rows="10" cols="45" name="userCode"></textarea>
        <input type="submit" value="提交代码"/>
    </form>

<!-- http://localhost:63342/TestWeb/web/address?userId=111&userCode=%E5%93%88%E5%93%88%E8%A6%85%E5%81%B6%E5%87%8F%E8%82%A5 -->


    <br>
    <br>
    <br>
    <br>

    <form action="address">
<!--        readonly disabled-->
<!--        都是只读-->
<!--        readonly 是还可以选择, 但是不能删除-->
<!--        disabled 连选择都选择不了-->
<!--        提交数据时, 只有 readonly 提交, disabled 不提交, 所以 disabled 的 name 可以不写-->
        用户代码 <input type="text" name="userCode" value="123" readonly/>
        <br>
        用户姓名 <input type="text" name="username" value="123" disabled/>
        <input type="submit" value="提交数据">
    </form>


    <br>
    <br>
    <br>
    <br>

    input 的 maxlength 属性, 表示它最多可以输入几个字符
    用户<input type="text" maxlength="3"/>
    <br>
    密码<input type="password" maxlength="3">

</body>
</html>